<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>datacenter</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="container-fluid">
            <div class="input-group">
                <input type="date" class="form-control" v-model="startTime">
                <input type="date" class="form-control" v-model="endTime">
                <div class="input-group-prepend">
                    <span class="input-group-text">开始时间和结束时间</span>
                </div>
            </div>
            <div class="input-group">

                <select class="custom-select" id="inputGroupSelect03" v-model="ztlxs">
                    <option disabled value="">选择需查询的渠道</option>
                    <option v-for="(item, index) in qudao_list" >{{item}}</option>
                </select>
                <select class="custom-select" id="inputGroupSelect04" v-model="urlbk">
                    <option disabled value="">选择要生成的报表</option>
                    <option v-for="(item, index) in res_list" :value="item[1]">{{item[0]}}</option>
                </select>
                <div class="input-group-prepend">
                    <button class="btn btn-outline-secondary" type="button" @click="getData">提交</button>
                </div>
            </div>
            <div id="xsqk" v-if="xsqk">
                xsqk
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                startTime:'',
                endTime: '',
                ztlxs: '',
                urlbk: '',
                xsqk: false,
                qudao_list: ['横店影视城网络运营中心', '淘宝旗舰店', '携程网', '京东', '横游网', '驴妈妈', '美团'],
                res_list: [['销售情况', 'xsqk'], ['门票销售情况', 'mpxsqk'], ['人群地域分析', 'rqdyfx'], ['用房情况', 'yfqk'], ['特殊票种', 'tspz'], ['套餐销售情况','tcxs']]
            },
            methods: {
              getData: function() {
                  let self = this;
                  let url = `http://118.25.136.154/data/${this.urlbk}?startTime=${this.startTime}&endTime=${this.endTime}&ztlxs=${this.ztlxs}`;
                  console.log(url)
                  this.$http.get(url).then(res=>{
                      console.log(res.body)

                  }, response=>{
                      console.log(response)
                  })
              }
            },
        })
    </script>
</body>

</html>